<template>
  <view v-if="urlStr.length > 0" class="web-content">
    <web-view v-if="type === 0" :src="urlStr"></web-view>
    <scroll-view v-else class="rich-text-box" :scroll-y="true">
      <mp-html :content="urlStr" :selectable="true" />
    </scroll-view>
    <view v-if="isStudy" class="time-box" :style="{backgroundImage: `url(${timeBgImg})`}">
      <view v-if="isStudyFinish" class="time-detail-box">
        <text class="time-text time-finish-text">已完成学习</text>
      </view>
      <view v-else class="time-detail-box">
        <text class="time-text">阅读</text>
        <text class="time-text time-num-text">{{readMinute}}</text>
        <text class="time-text">:</text>
        <text class="time-text time-num-text">{{readSecond}}</text>
        <text class="time-text">分钟</text>
      </view>
    </view>
  </view>
  <empty-view v-else empty-message="暂无内容" :is-fullscreen="true" />
</template>

<script>
import {isEmpty, prefixInteger, showToast} from "@/utils/utils";
import StrengthenRichText from "./utils/strengthenRichText"
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html"
import Api, {fileUrlHost, imgHost} from "@/utils/api";
import {postRequest} from "@/utils/request";
import {GLOBAL_USER_ID} from "@/utils/const";
import {getItem} from "@/utils/storage";
import EmptyView from "@/components/EmptyView";

export default {
  name: "index",
  components: {EmptyView, mpHtml},
  data() {
    return {
      title: '智广乡村', // 导航栏标题
      type: 0, // url类型，0: url地址；1: html字符串
      urlStr: '', // 需要加载的内容
      articleId: '', // 文章id
      isStudy: false, // 是否是党员学习
      isStudyFinish: false, // 是否已阅读学习
      timeBgImg: imgHost + 'icon_time_bg.png',  // 计时器背景图
      readTimer: null,
      readMinute: '00',
      readSecond: '40',
      emptyObj: {
        show: true,
        message: '暂无内容'
      }
    }
  },
  onLoad(e) {
    console.log(e)
    this.title = !isEmpty(e.title) ? e.title : '智广乡村';
    this.type = !isEmpty(e.type) ? parseInt(e.type) : 0;

    if (e.articleId) {
      this.articleId = e.articleId
      this.isStudy = e.isStudy

      this.readCountTime(new Date().getTime() + 40000)
    }

    uni.setNavigationBarTitle({
      title: this.title
    })

    if (this.type === 0) {
      this.urlStr = e.urlStr
    } else {
      const htmlString = decodeURIComponent(e.urlStr)
      const htmlStr = StrengthenRichText.format(htmlString)
      this.urlStr = htmlStr.replace(/iptvfms-host/g, fileUrlHost)
    }
  },
  methods: {
    // 学习倒计时
    readCountTime(times) {
      const nowTime = new Date().getTime()
      const leftTime = new Date(times - nowTime)
      if (leftTime >= 0) {
        this.readMinute = prefixInteger(leftTime.getMinutes(), 2)
        this.readSecond = prefixInteger(leftTime.getSeconds(), 2)

        this.readTimer = setTimeout(() => {
          this.readCountTime(times)
        }, 1000)
      } else {
        this.readTimer && clearTimeout(this.readTimer)
        this.readTimer = null
        this.isStudyFinish = true
        this.studyFinishAddTime()
      }
    },
    // 学习完成增加时长
    studyFinishAddTime() {
      const params = {
        userId: getItem(GLOBAL_USER_ID),
        contentType: 2,
        contentId: this.articleId,
        studyTime: 40
      }
      postRequest(Api.StudyLearn, params)
          .then(res => {
            showToast('已完成学习')
            const pages = getCurrentPages();
            const prePage = pages[pages.length - 2]; // 上一个页面
            prePage.$vm.refreshPageData()
          })
    }
  },
  onUnload() {
    this.readTimer && clearTimeout(this.readTimer)
    this.readTimer = null
    console.log('页面卸载')
  }
}
</script>

<style scoped lang="scss">
.web-content {
  display: flex;
  width: 100%;
  height: 100%;
  .rich-text-box {
    padding: 15rpx 25rpx;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    .rich-content {
      width: 100%;
      height: 100%;
    }
  }
  .time-box {
    position: fixed;
    background-size: 100% 100%;
    right: 10rpx;
    bottom: 180rpx;
    width: 265rpx;
    height: 210rpx;
    display: flex;
    align-items: flex-end;
    .time-detail-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 90rpx;
      width: 100%;
      .time-text {
        color: #FFFFFF;
        font-weight: bolder;
        font-size: $center-size-x;
        margin: 0 5rpx;
      }
      .time-finish-text {
        font-size: $center-size-xxx;
      }
      .time-num-text {
        background: linear-gradient(0deg, rgba(241,42,39,0.99), rgba(196,17,14,0.99), rgba(241,42,39,0.99));
        border-radius: 10rpx;
        font-size: $center-size-xxx;
        padding: 5rpx;
        min-width: 40rpx;
        text-align: center;
      }
    }
  }
}
</style>
